<template>
  <p-modal
    title="异常处理人分配（PQE判定)"
    :width="width"
    centered
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :wrapClassName="'ycfpPQEpd'"
    @cancel="handleCancel"
  >
    <p-spin :spinning="confirmLoading">
      <h4 class="hTitle">异常信息</h4>
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        style="display:flex;flex-wrap: wrap;"
      >
      <div class="formLeft">
        <info-list label-width="210">
          <info-list-item label="异常单号：">
            {{123}}
          </info-list-item>
          <info-list-item label="工序工单：">
            {{123}}
          </info-list-item>
          <info-list-item label="异常发起人员：">
            {{123}}
          </info-list-item>
          <info-list-item label="异常产线(二级工序)：">
            {{123}}
          </info-list-item>
          <info-list-item label="故障大类：">
            {{123}}
          </info-list-item>
          <info-list-item label="物料名称：">
            {{123}}
          </info-list-item>
          <info-list-item label="附件：">
            <a>{{'xxx附件'}}</a>
          </info-list-item>
        </info-list>
      </div>
      <div class="formRight">
        <info-list label-width="210" >
          <info-list-item label="异常类型：">
            {{123}}
          </info-list-item>
          <info-list-item label="异常数量：">
            {{123}}
          </info-list-item>
          <info-list-item label="异常发起时间：">
            {{123}}
          </info-list-item>
          <info-list-item label="工站：">
            {{123}}
          </info-list-item>
          <info-list-item label="故障小类：">
            {{123}}
          </info-list-item>
          <info-list-item label="物料编码：">
            {{123}}
          </info-list-item>
          <info-list-item label="异常SN明细：">
            {{123}}
          </info-list-item>
        </info-list>
      </div>
      <h4 class="hTitle" style="width: 100%;margin-top:20px;">PQE判定</h4>
      <div style="width: 30%">
        <p-form-model-item label="异常是否成立" prop="ycsfcl">
          <p-switch v-model="form.ycsfcl" checked-children="是" un-checked-children="否" default-checked />
        </p-form-model-item>
        <!-- <p-form-model-item label="是否推送工艺协助" prop="sftsgyxz">
          <p-switch v-model="form.sftsgyxz" checked-children="是" un-checked-children="否" default-checked />
        </p-form-model-item> -->
      </div>
      <div style="width: 70%">
        <p-form-model-item label="不成立原因" prop="bclyy">
          <p-input
            placeholder="请输入内容"
            v-model="form.bclyy"
          />
        </p-form-model-item>
    <!--     <p-form-model-item label="工艺协助人员" prop="gyxzry">
          <p-input
            placeholder="请输入内容"
            v-model="form.gyxzry"
          />
        </p-form-model-item> -->
      </div>
      <div style="width: 30%"> 
        <p-form-model-item label="异常等级" prop="ycdj">
          <p-select v-model="form.ycdj">
            <p-select-option :value="item.value" v-for="(item, index) in ycdjList" :key="item.value">
              {{item.label}}
            </p-select-option>
          </p-select>
        </p-form-model-item>
        
      </div>
      <div style="width: 70%;display:flex;">
        <p-form-model-item label="是否返工" prop="sffg">
          <p-switch v-model="form.sffg" checked-children="是" un-checked-children="否" default-checked />
        </p-form-model-item>
        <p-form-model-item label="是否切线" prop="sfqx">
          <p-switch v-model="form.sfqx" checked-children="是" un-checked-children="否" default-checked />
        </p-form-model-item>
      </div>
      <div style="width: 30%">
        <p-form-model-item label="是否锁定产品" prop="sfsdcp">
          <p-switch v-model="form.sfsdcp" checked-children="是" un-checked-children="否" default-checked />
        </p-form-model-item>
      </div>
      <div style="width: 70%">
        <p-form-model-item label="锁定单号" prop="sddh">
          <p-input
            placeholder="请输入内容"
            v-model="form.sddh"
          />
        </p-form-model-item>
      </div>
      <p-form-model-item label="生产策略" prop="sccl" style="width: 50%;">
        <p-input
          placeholder="请输入内容"
          v-model="form.sccl"
        />
      </p-form-model-item>
      <p-form-model-item label="问题处理人" prop="wtclr" style="width: 50%;">
        <p-input
          placeholder="请输入内容"
          v-model="form.wtclr"
        />
      </p-form-model-item>
      <p-form-model-item label="异常信息推送人员" prop="yctsry" style="width: 100%;">
        <p-input
          placeholder="请输入内容"
          v-model="form.yctsry"
        />
      </p-form-model-item>
      </p-form-model>
    </p-spin>
  </p-modal>
</template>

<script>
import _ from "lodash";
import mesPeProcess from "@/api/mesPeProcess";
export default {
  name: "ycfpPQEpd",
  props: {
    value: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      handle: '',
      width: 800,
      visible: false,
      confirmLoading: false,
      ycdjList: [
        {
          value: 1,
          label: '一般',
        },
        {
          value: 2,
          label: '重要',
        },
        {
          value: 3,
          label: '致命',
        },
      ],
      form: {
        ycdh: '', 
        ycgxgd: '',
        ycfqry: '', 
        ycxxerjgx: '', 
        ycgzdl: '',
        wlmc: '',
        sbmc: '',

        yclx: '',
        ycsl: '',
        ycfqsj: '',
        ycgz: '',
        gzxl: '',
        wlbm: '',
        ycsnmx: '',
        ycms: '',

        ycsfcl: false,
        sftsgyxz: false,
        bclyy: '',
        gyxzry: '',
        ycdj: 1,
        sffg: false,
        sfqx: false,
        sfsdcp: false,
        sddh: '',

        sccl: '',
        wtclr: '',
        yctsry: '',
      },
      rules: {
        ycdh: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycgxgd: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycfqry: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycxxerjgx: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycgzdl: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        wlmc: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        sbmc: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],

        yclx: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycsl: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycfqsj: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycgz: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        gzxl: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        wlbm: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycsnmx: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycms: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycfj: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycsfcl: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        sftsgyxz: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        sccl: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        yctsry: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycdj: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        sffg: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        sfqx: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        sfsdcp: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        wtclr: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
      },
    };
  },
  watch: {
    value() {
      this.initValue()
    },
    visible(val) {
      if (!val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
  },
  mounted() {
    this.initValue();
  },
  methods: {
    /* validateQuantity(rule, value, callback){
      if (value === '' || value === null) {
        callback(new Error('请输入内容'));
      } else if (!(/^[1-9]\d*$/.test(value))) {
        callback(new Error("只能输入正整数"));
      } else {
        callback();
      } 
    }, */
    initValue() {
      this.visible = this.value
    },
    handleOk(){
      const that = this;
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
        }
      });
    },
    handleCancel(){
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less">
  .ycfpPQEpd {
    .poros-form .poros-form-item{
      display: flex;
    }
    .poros-form{
      color: rgba(0, 0, 0, 0.85);
    }
    .poros-modal-body{
      max-height: 770px;
      overflow: auto;
    }
    .poros-form-item-label{
      width: 146px;
    }
    .poros-form-item .poros-form-item-control-wrapper{
      overflow: hidden;
    }
    .gt-info-list-item{
      .label{
        text-align: right;
      }
    }
    .formLeft{
      width: 50%;
    }
    .formRight{
      width: 50%;
    }
    .w50{
      width: 50%;
    }
  }
</style>

